<template>
  <div class="succeed">
    <!-- 导航栏 -->
    <div class="header-only header-only1">
      <div class="header-active">
        <van-tabs v-model="active" line-height="2" background="#fafafa">
          <van-tab
            :title="item.value"
            v-for="(item, index) in navarr"
            :key="index.id"
          ></van-tab>
        </van-tabs>
      </div>

      <router-link to="/classify" tag="div" class="navigation">
          <van-icon name="apps-o" />
          导航
      </router-link>
    </div>
    <!-- 登入 -->
    <div class="mine-userCard">
      <div class="mine-userCardimg">
        <img src="../assets/img/yh01.png" alt="" />
      </div>
      <div class="enter">
        <div class="c-name">江湖人江湖魂</div>
        <div class="c-des">永久vip</div>
      </div>
      <div class="promptly" to="">
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- cell单元格 -->
    <div class="box-borderT">
      <van-cell
        :title="item.title"
        is-link
        :icon="item.icon"
        :value="item.value"
        v-for="(item, value) in boxarr"
        :key="value.id"
        class="box-borderTs"
      />
    </div>
    <div class="box-borderT box-borderT1">
      <van-cell
        :title="item.title"
        is-link
        :icon="item.icon"
        :value="item.value"
        v-for="(item, value) in box1arr"
        :key="value.id"
        class="box-borderTs"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "minecomm",
  data() {
    return {
      active: "",
      navarr: [],
      boxarr: [],
      box1arr: [
        {
          icon: "todo-list-o",
          title: "免流量追剧",
        },
        {
          icon: "refund-o",
          title: "借钱",
          value: "额度高易通过",
        },
        {
          icon: "coupon-o",
          title: "办信用卡",
          value: "领三个月会员",
        },
        {
          icon: "bulb-o",
          title: "安全中心",
        },
        {
          icon: "wechat",
          title: "隐私设置",
        },
      ],
    };
  },
  mounted() {
    this.$axios.get("/api/succeednavarr").then(data => {
        var succeednavarr = data.data
        this.navarr = succeednavarr;
    }),
    this.$axios.get("/api/succeedboxarr").then(data => {
      var succeedboxarr = data.data
      this.boxarr = succeedboxarr;

    })
  }
};
</script>

<style scoped>
.minecomm {
  background: #fafafa;
}

/* 导航栏 */
.header-only1 {
  padding: 0 !important;
  background: #fafafa !important;
  display: block;
  height: 44px;
}
.header-active {
  width: 89%;
  float: left;
}
.navigation {
  width: 10%;
  float: right;
  text-align: center;
}
.navigation i {
  position: relative;
  top: 0.04rem;
  font-size: 0.2rem;
}
.header-active >>> .van-tabs--line {
  width: 100%;
}
.nav1 {
  width: 40px;
  height: 40px;
  display: inline-block;
}
/* 登入 */
.mine-userCard {
  box-sizing: border-box;
  display: block;
  padding: 0.15rem 0;
  width: 3.75rem;
  height: 0.9rem;
  background: #fff;
}
.mine-userCardimg {
  float: left;
  width: 0.87rem;
  height: 0.6rem;
}
.mine-userCardimg img {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin: 0 0.13rem;
}
.enter {
  float: left;
  width: 1.8rem;
  height: 0.6rem;
  padding-left: 0.05rem;
}
.c-name {
  line-height: 0.25rem;
}
.c-des {
  padding-top: 0.05rem;
  line-height: 0.14rem;
  font-size: 0.12rem;
  color: #999;
}
.promptly {
  box-sizing: border-box;
  float: left;
  width: 0.89rem;
  height: 0.6rem;
  line-height: 0.4rem;
  font-size: 0.16rem;
  color: #0bbe06;
}
.promptly i {
  color: #999;
  vertical-align: baseline;
}
/* cell单元格 */
.box-borderT {
  margin-top: 0.1rem;
}
.box-borderT .van-icon:nth-child(1) {
  color: #0bbe06;
  font-size: 0.18rem;
}
.box-borderT1 .van-icon:nth-child(1) {
  color: dodgerblue;
}
</style>
